<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <title>自定义checkbox,radio样式</title>
    <style type="text/css">
    input{   /*隐藏原来的input按钮*/
        display: none;
    }
    div{
        position: relative; 
    }
    label{
        display: inline-block; 
        width: 20px; 
        height: 20px; 
        background-image: url('1.png'); 
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    label#s1{background-position: -0.6cm -0.23cm;}
    label#s2{background-position: -0.6cm -0.8cm;}

    input#l1:checked+label#s1{background-position: -1.52cm -0.23cm;}
    input#l2:checked+label#s2{background-position: -1.52cm -0.78cm;}
    </style>
</head>
<body>
    <div>
        <input id="l1" type="radio">
        <label for="l1" id="s1"></label>
    </div>
    <br />
    <div>
        <input id="l2" type="checkbox">
        <label for="l2" id="s2"></label>
    </div>
</body>
</html>